import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:get/get.dart';

import 'logic.dart';

class FeedbackPage extends StatelessWidget {
  const FeedbackPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<FeedbackLogic>();
    final state = Get.find<FeedbackLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      appBar: AppBar(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        titleSpacing: -10,
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "用户反馈及建议",
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15),
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Padding(
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: Text("反馈类型"),
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(vertical: 10),
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              const Text("反馈建议"),
                              Obx(() {
                                return Checkbox(
                                    value: state.isFeedbackSuggest.value,
                                    activeColor: Colors.blue,
                                    onChanged: (v) {
                                      state.isFeedbackSuggest.value = true;
                                    });
                              })
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              const Text("投诉建议"),
                              Obx(() {
                                return Checkbox(
                                    value: !state.isFeedbackSuggest.value,
                                    activeColor: Colors.blue,
                                    onChanged: (v) {
                                      state.isFeedbackSuggest.value = false;
                                    });
                              })
                            ],
                          ),
                        ],
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: Text("问题/意见描述"),
                    ),
                    Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      child: Column(
                        children: [
                          Obx(() {
                            return CustomTextField(
                              value: state.content.value,
                              style: const TextStyle(fontSize: 12),
                              onChanged: (t) {
                                state.content.value = t;
                              },
                              inputDecoration: const InputDecoration(
                                  hintText: "请填写10字以上的问题描述，方便我们更好的帮您解决问题。",
                                  hintStyle: TextStyle(color: Colors.grey),
                                  isDense: true,
                                  isCollapsed: true,
                                  border: InputBorder.none),
                              maxLines: 6,
                            );
                          }),
                          const SizedBox(
                            height: 10,
                          ),
                          Obx(() {
                            return GridView.builder(
                                shrinkWrap: true,
                                physics: const NeverScrollableScrollPhysics(),
                                gridDelegate:
                                    const SliverGridDelegateWithFixedCrossAxisCount(
                                        crossAxisCount: 3,
                                        crossAxisSpacing: 5,
                                        mainAxisSpacing: 5,
                                        childAspectRatio: 1),
                                itemCount: state.imgList.length,
                                itemBuilder: (BuildContext context, int index) {
                                  var bean = state.imgList[index];
                                  if (bean == "-1") {
                                    return InkWell(
                                      onTap: logic.addImg,
                                      child: const Material(
                                        elevation: 2,
                                        child: Center(
                                          child: Icon(Icons.add),
                                        ),
                                      ),
                                    );
                                  } else {
                                    return Material(
                                      elevation: 2,
                                      child: Stack(
                                        children: [
                                          Positioned.fill(
                                            child: ClipRRect(
                                              child: Image.file(
                                                File(bean),
                                                fit: BoxFit.cover,
                                              ),
                                            ),
                                          ),
                                          Positioned(
                                              top: 0,
                                              right: 0,
                                              child: InkWell(
                                                onTap: () {
                                                  state.originImgList
                                                      .removeWhere((element) =>
                                                          element == bean);
                                                  logic.refreshImag();
                                                },
                                                child: const Padding(
                                                  padding: EdgeInsets.all(8.0),
                                                  child: Icon(
                                                    Icons
                                                        .delete_forever_outlined,
                                                    color: Colors.red,
                                                  ),
                                                ),
                                              ))
                                        ],
                                      ),
                                    );
                                  }
                                });
                          })
                        ],
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: Text("联系方式（选填）"),
                    ),
                    Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      child: Obx(() {
                        return CustomTextField(
                          value: state.contactWay.value,
                          style: const TextStyle(fontSize: 12),
                          onChanged: (t) {
                            state.contactWay.value = t;
                          },
                          inputDecoration: const InputDecoration(
                              hintText: "填写您的电话/微信/QQ/邮箱,如果需要便于我们取得联系。",
                              hintStyle: TextStyle(color: Colors.grey),
                              isDense: true,
                              isCollapsed: true,
                              border: InputBorder.none),
                          maxLines: 6,
                        );
                      }),
                    ),
                    const SizedBox(
                      height: 20,
                    )
                  ],
                ),
              ),
            ),
            InkWell(
              onTap: logic.submit,
              child: Container(
                  margin: const EdgeInsets.only(top: 15),
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  decoration: BoxDecoration(
                      border: Border.all(color: orangeColor),
                      borderRadius: BorderRadius.circular(20)),
                  child: const Center(
                      child: Text(
                    '提交反馈',
                    style: TextStyle(
                        color: orangeColor,
                        fontWeight: FontWeight.bold,
                        fontSize: 16),
                  ))),
            ),
          ],
        ),
      ),
    );
  }
}
